<script setup>
import { reactive, ref, onMounted } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue'
import { getAboutUsVosPageApi, getActivityInfoByIdApi } from "../../service/applyaudit/applyaudit";
const breadcround = ref([
  { name: '首页', url: '/main/home' },
  { name: '关于协会', url: '/main/aboutassociation' }
])

let aboutus = ref({})

function getAboutUsVosPage() {
  getAboutUsVosPageApi().then((resp) => {
    if (resp.data.code === 0) {
      aboutus.value = resp.data.result.records[0];
    } else {

    }
  });
}
let videoIs = ref([true, true])
function playClick(index) {

  videoIs.value[index] = false

  console.log(videoIs.value[index]);

}
onMounted(() => {
  getAboutUsVosPage();
})
</script>

<template>
  <div>
    <div class="aboutImg"><img src="@/assets/img/aboutImg.png" alt=""></div>
    <div class="nav">
      <bread class="bread" :breadcround="breadcround" />
      <div class="introduction">
        <div class="introductionImg"><img src="@/assets/img/intrdouce.png" alt=""></div>
        <div class="introductionContext" v-html="aboutus.juxianStory">

        </div>
        <div style="width: 8px;height: 440px;background: #1891FF;"></div>
      </div>
      <div class="video" v-if="aboutus.schoolEnv">
        <div class="videoText">宣传视频</div>
        <div class="videoItems" >
          <div class="videoItem">
            <template v-if="videoIs[0]">
              <div>
                <div class="img">
                  <img :src="aboutus.schoolEnv.split('#@#')[0]" alt="">
                </div>
                <div class="itemText">
                  <div class="title">淄博市技能人才开发协会宣传片</div>
                  <div class="img">
                    <el-icon :size="40" color="#fff">
                      <VideoPlay />
                    </el-icon>
                  </div>
                  <div class="play" @click="playClick(0)">点击播放</div>
                </div>
              </div>
            </template>
            <div style="width: 100%;height: 100%;" v-if="!videoIs[0]">
              <video width="720" height="420" controls :src="aboutus.schoolGlory.split('#@#')[0]"></video>
            </div>
          </div>
          <div class="videoItem">
            <template v-if="videoIs[1]">
              <div>
                <div class="img">
                  <img :src="aboutus.schoolEnv.split('#@#')[1]" alt="">
                </div>
                <div class="itemText">
                  <div class="title">淄博市技能人才开发协会宣传片</div>
                  <div class="img">
                    <el-icon :size="40" color="#fff">
                      <VideoPlay />
                    </el-icon>
                  </div>
                  <div class="play" @click="playClick(1)">点击播放</div>
                </div>
              </div>
            </template>
            <div style="width: 100%;height: 100%;" v-if="!videoIs[1]">
              <video width="720" height="420" controls :src="aboutus.schoolGlory.split('#@#')[1]"></video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.aboutImg {
  height: 280px;
  background: #0F599C;

  img {
    width: 100%;
    height: 100%;
  }
}

.nav {
  // padding: 0 7.8%;
  width: 1500px;
  margin: 0 auto;

  .bread {
    margin: 24px 0 48px;
  }

  .introduction {
    height: 520px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .introductionImg {
      width: 380px;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .introductionContext {
      width: 76%;
      height: 440px;
      background: #F5F6F7;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 36px;
      padding: 0 60px;
      overflow-y: auto;
    }
  }

  .video {
    margin-top: 48px;

    .videoText {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      margin-bottom: 23px;
    }

    .videoItems {
      display: flex;
      align-items: center;
      justify-content: space-between;


      .videoItem:hover {
        .itemText {
          opacity: 1;
          background: rgba(0, 0, 0, 0.5);
        }
      }

      .videoItem {
        width: 720px;
        height: 420px;

        position: relative;

        .img {
          width: 720px;
          height: 420px;

          img {
            width: 100%;
            height: 100%;
          }

        }

        .itemText {
          position: absolute;
          top: 0;
          width: 100%;
          opacity: 0;
          display: flex;

          height: 100%;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .title {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;

          }

          .img {
            width: 40px;
            height: 40px;
            margin: 24px 0;
          }

          .play {
            border: 1px solid #fff;
            padding: 12px 53px;
            color: #fff;
            cursor: pointer;
          }
        }
      }

    }
  }
}
</style>
